<template>
  <div class="checkweb">
    <div style="width: 0; height: 0; margin: 0 auto" id="user"></div>
  </div>
</template>
    
    <script>
export default {
  mounted() {
    console.log(window.innerHeight);
    document.getElementById("user").style.width = window.innerWidth / 4 + "px"; //初始化echarts图表宽度
    document.getElementById("user").style.height =
      window.innerHeight / 2 - 100 + "px"; //初始化echarts图表高度
    let myChart = this.$echarts.init(document.getElementById("user"));
    window.addEventListener("resize", () => {
      document.getElementById("user").style.width =
        window.innerWidth / 2 - 420 + "px";
      myChart.resize();
      document.getElementById("user").style.height =
        window.innerHeight / 2 - 100 + "px";
      myChart.resize();
    });
    this.$axios.post("api/EchartsNumber").then(async (data)=>{
      this.lineCheck(await data.data)
    })
  },
  methods: {
    lineCheck(data) {
      let myChart = this.$echarts.init(document.getElementById("user"));
      myChart.setOption({
        backgroundColor: "#2c343c",
        title: {
          text: "网站人数",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}人 ({d}%)",
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
        },
        series: [
          {
            name: "网站名",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: [
              { value: data[0].number, name: data[0].name },
              { value: data[1].number, name: data[1].name },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)",
            },
            labelLine: {
              lineStyle: {
                fontSize: "30px",
                color: "rgba(255, 255, 255, 0.3)",
              },
              smooth: 0.2,
              length: 20,
              length2: 20,
            },
            itemStyle: {
              color: "red",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.checkweb {
  margin: 50px auto;
  font-weight: bold;
  font-family: 黑体;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
</style>